<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<title>wysiwy-print</title>
	<!-- <link rel="stylesheet" type="text/css" href="js/jquery/jquery-ui-1.10.3.custom.min.css" /> -->
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<script type="text/javascript" src="js/jquery/jquery-1.10.0.min.js"></script>
	<!-- <script type="text/javascript" src="js/jquery/jquery-ui-1.10.3.custom.min.js"></script> -->
	<!-- <script type="text/javascript" src="js/main.js"></script> -->
	<style type="text/css">
		#wysiwyp-ctn #item {
			border: 0 none;
			font-size: 17px;
			height: 60px;
			left: 100px;
			line-height: 30px;
			overflow: hidden;
			text-indent: 60px;
			top: 756px;
			width: 630px;
		}
		.hoteditor-notifier {
			background-color: transparent;
			background-image: url("images/hoteditor-notifier.gif");
			cursor: pointer;
			height: 24px;
			position: absolute;
			width: 24px;
			z-index: 99;
		}
		.hoteditor-ctn {
			background-color: #FFFFFF;
			border: 1px solid #AF70FF;
			box-shadow: 1px 1px 6px #7B7B7B;
			-moz-box-shadow: 1px 1px 6px #7B7B7B;
			-webkit-box-shadow: 1px 1px 6px #7B7B7B;
			padding: 5px 5px 10px;
			position: absolute;
			z-index: 99;
		}
		.hoteditor-input {
			resize: none;
		}
		.hoteditor-btn-bar {
			padding-top: 10px;
			text-align: right;
		}
		.hoteditor-btn-bar button {
			margin-right: 10px;
		}
	</style>
	<script type="text/javascript">
		(function defineHotEditor$Plugin() {
			
			$.fn.hotEditor= function() {
				
				if (!this.isOverflow()) {
					return;
				}
				
				var self = this;
				var height = this.outerHeight(false);
				var width = this.outerWidth(false);
				var offset = this.offset();
				
				var notifierDim = 24;
				var notifierTop = offset.top + height - notifierDim;
				var notifierLeft = offset.left + width;
				
				self.defaultText = self.text();
				self.$input = null;
				self.$ctn = null;
				self.$notifier = 
					$('<div>',
						{
							'id'	: 'hotEditorNotifier_' + this.prop('id'),
							'class'	: 'hoteditor-notifier',
							'title' : 'Hiện chữ ở mục bên bị tràn mất khỏi phôi in, bấm để chỉnh sửa'
						}
					)
					.appendTo(document.body)
					.offset({top: notifierTop, left: notifierLeft});
				
				self.showCtn = function() {
					self.$notifier.hide();
					self.$ctn.fadeIn('fast');
					return self;
				};
				
				self.hideCtn = function() {
					self.$ctn.fadeOut('fast');
					self.$notifier.show();
					return self;
				};
				
				self.$notifier.bind('click', function() {
					if (self.$ctn === null) {
						
						var ctnPdingWidth = 5;
						var ctnTop = offset.top - ctnPdingWidth;
						var ctnLeft = offset.left - ctnPdingWidth;
						
						self.$ctn = 
							$('<div>',
								{
									'id'	: 'hotEditorCtn_' + self.prop('id'),
									'class'	: 'hoteditor-ctn'
								}
							)
							.appendTo(document.body)
							.offset({top: ctnTop, left: ctnLeft})
							.hide();
							
						self.$input =
							$('<textarea>',
								{
									'id'	: 'hotEditorInput_' + self.prop('id'),
									'class'	: 'hoteditor-input'
								}
							)
							.appendTo(self.$ctn[0])
							.css({
								'font-family'	: self.css('font-family'),
								'font-size'		: self.css('font-size'),
								'line-height'	: self.css('line-height'),
								'height'		: self.css('height'),
								'width'			: self.css('width'),
								'text-indent'	: self.css('text-indent'),
								'padding'		: self.css('padding')
							});
						
						self.$ctn.append('<div class="hoteditor-btn-bar"><button class="hoteditor-commit">Ok</button><button class="hoteditor-reset">Giá trị ban đầu</button><button class="hoteditor-exit">Thoát</button></div>');
						
						self.$ctn.find('.hoteditor-exit').bind('click', self.hideCtn);
						self.$ctn.find('.hoteditor-reset').bind('click', function() {
							self.$input.val(self.defaultText);
						});
						self.$ctn.find('.hoteditor-commit').bind('click', function() {
							self.text(self.$input.val())
							self.hideCtn();
						});
					}
					
					self.showCtn();
				});
			};
			
			$.fn.isOverflow = function() {
				
				var el = this[0];
				
				return (el.clientWidth < el.scrollWidth) || (el.clientHeight < el.scrollHeight);
			};
		})(jQuery);
	</script>
</head>
<body>
	<!-- <button id="print" onclick="printDiv('wysiwyp-ctn', ['css/main.css'], false)">Print</button> -->

	<div id="wysiwyp-ctn" class="a4d">
		<div id="item" class="item">bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ bị tràn chữ</div>
	</div>
	
</body>
</html>